<!--  -->
<template>
  <div ref="scatter" class="scatter" />
</template>

<script>
// 导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// import echarts from 'echarts'
import * as echarts from 'echarts'
export default {
  name: '',
  components: {},
  props: {
  },
  data() {
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {
    test() {
      return this.$store.state.home.regionCollect.series
    }
  },
  // 监控data中的数据变化
  watch: {
    test: {
      deep: true,
      handler: function() {
        this.scatterFn()
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.scatterFn()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
  // 方法集合
  methods: {
    scatterFn() {
      const scatterOption = {
        title: [
          {
            left: 'center',
            text: '销售额分布'
          },
          {
            left: '60',
            text: '单位/元',
            textStyle: {
              lineHeight: '45',
              color: '#999',
              fontSize: '12px'
            }
          }
        ],
        xAxis: {
          type: 'category',
          //   data: ['北京平西府街道', '霍营街道'],
          data: this.$store.state.home.regionCollect.xAxis,
          axisLabel: {
            formatter: function(value) {
              if (value.length > 3) {
                return `${value.slice(0, 3)}...`
              }
              return value
            }
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            // data: [1285482, 239571],
            data: this.$store.state.home.regionCollect.series,
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
              // 这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [8, 8, 0, 0]
              }
            }
          }
        ]
      }
      // 传递一个dom元素
      const psgTimeCharts = echarts.init(this.$refs.scatter)
      // 传入一个配置项
      psgTimeCharts.setOption(scatterOption)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang='scss'>
.scatter{
    position: absolute;
    right: 0px;
    top: 0px;
    height: 280px;
    width: 50%;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
    border-width: 0px;
    text-align: center;
}
</style>
